<template>
	<div class="info_config_page">
		<div class="common_form_search">
			<el-form ref="searchForm" :inline="true" :model="searchForm" class="form-inline">
				<el-form-item label="订单号">
					<el-input v-model="searchForm.orderNo" placeholder="请输入订单号"></el-input>
				</el-form-item>
				<el-form-item label="支付ID">
					<el-input v-model="searchForm.payTradeNo" placeholder="请输入支付ID"></el-input>
				</el-form-item>
				<el-form-item label="支付类型">
					<el-select v-model="searchForm.payType" clearable placeholder="请选择">
						<el-option :value="1" label="预授权"></el-option>
						<el-option :value="2" label="信用套餐"></el-option>
						<el-option :value="3" label="支付宝代扣"></el-option>
						<el-option :value="4" label="其他"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="上链状态">
					<el-select v-model="searchForm.status" clearable placeholder="请选择">
						<el-option :value="0" label="未上链"></el-option>
						<el-option :value="1" label="已上链"></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item label="到期形式">
          <el-select v-model="searchForm.daoqi" clearable placeholder="请选择">
            <el-option :value="0" label="到期买断"></el-option>
            <el-option :value="1" label="到期归还"></el-option>
          </el-select>
        </el-form-item> -->
				<el-form-item label="支付时间">
					<my-date-picker ref="myDatePicker"></my-date-picker>
				</el-form-item>
				<!-- <el-form-item label="租户ID">
          <el-input
            v-model="searchForm.nameqq"
            placeholder="请输入租户ID"
          ></el-input>
        </el-form-item> -->
				<el-form-item label="合同ID">
					<el-input v-model="searchForm.flowId" placeholder="请输入合同ID"></el-input>
				</el-form-item>
				<!-- <el-form-item label="供应商">
          <el-input
            v-model="searchForm.cert_no"
            placeholder="请输入供应商"
          ></el-input>
        </el-form-item> -->
				<el-form-item>
					<el-button size="small" @click="search()" type="primary">查询</el-button>
					<el-button size="small" @click="reset()">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-divider></el-divider>

		<div class="flex align-center table-top-btns">
			<h5 class="flex align-center">
				<svg-icon style="margin-right: 15px" icon-class="list" :size="15" />数据列表
			</h5>
		</div>
		<el-table :data="tableData" border>
			<el-table-column align="center" header-align="center" fixed prop="id" label="ID" width="60" />
			<el-table-column align="center" header-align="center" fixed prop="order_no" label="订单ID" width="110" />

			<el-table-column align="center" header-align="center" prop="create_time" label="订单创建时间" width="100" />
			<el-table-column align="center" header-align="center" prop="pay_time" label="订单支付时间" width="100" />
			<el-table-column align="center" header-align="center" prop="pay_trade_no" label="订单支付ID" width="100" />
			<el-table-column align="center" header-align="center" label="订单支付类型">
				<template slot-scope="scope">
					<span>{{scope.row.pay_type==1? '预授权': 
            scope.row.pay_type==2? '信用套餐': 
            scope.row.pay_type==3? '支付宝代扣': '其他'}}</span>
				</template>
			</el-table-column>
			<el-table-column align="left" header-align="center" label="订单金额信息" min-width="180">
				<template slot-scope="scope">
					<div>
						<span class="span-info">免押金额：</span>{{ scope.row.foregift }}
					</div>
					<div>
						<span class="span-info">实际预授权金额：</span>{{ scope.row.foregift_deduct }}
					</div>
					<div>
						<span class="span-info">租期：</span>{{ scope.row.month_total }}
					</div>
					<div>
						<span class="span-info">月租金：</span>{{ scope.row.rent_total }}
					</div>
					<div>
						<span class="span-info">到期金额：</span>{{ scope.row.relet_rent_total }}
					</div>
				</template>
			</el-table-column>
			<!-- <el-table-column
        align="center"
        header-align="center"
        prop="login"
        label="到期形式"
        width="100"
      />
      <el-table-column
        align="center"
        header-align="center"
        prop="logitype"
        label="仓库类型"
        width="100"
      />
      <el-table-column
        align="left"
        header-align="center"
        prop="zlf_info"
        label="租赁方信息"
        min-width="200"
      >
        <template slot-scope="scope">
          <div>
            <span class="span-info">企业名称：</span
            >{{ scope.row.zlf_info.name }}
          </div>
          <div>
            <span class="span-info">信用代码：</span
            >{{ scope.row.zlf_info.number }}
          </div>
          <div>
            <span class="span-info">法人姓名：</span
            >{{ scope.row.zlf_info.boss_name }}
          </div>
        </template>
      </el-table-column> -->
			<el-table-column align="center" header-align="center" prop="flow_id" label="租赁合同ID">
			</el-table-column>
			<!-- <el-table-column
        align="center"
        header-align="center"
        label="供应商"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.zlf_info.name }}</span>
        </template>
      </el-table-column> -->
			<el-table-column align="center" header-align="center" prop="chain_time" label="上链时间" width="100" />
			<el-table-column align="center" header-align="center" prop="chain_status" label="上链状态" width="100">
				<template slot-scope="scope">
					<el-tag class="pointer" :type="scope.row.chain_status === 0 ? 'primary' : 'success'"
						@click="getParams(scope.row.chain_params)" disable-transitions>
						{{ scope.row.chain_status == 0 ? "未上链" : "已上链" }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" header-align="center" fixed="right" label="操作" width="120">
				<template slot-scope="scope">
					<div class="operate_col">
						<el-button @click="checkContract(scope.row.pact_url)" type="primary" size="small">
							查看合同
						</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<custom-page ref="customPage" :total="total" @getList="getList"></custom-page>
		<param-dialog :dialogVisible="dialogVisible" :dialogType="dialogType" :requestInfo="requestInfo"
			:responseInfo="responseInfo" @close="closeDialog"></param-dialog>
	</div>
</template>

<script>
	import {
		getOrderList
	} from "@/api/lease";
	import customPage from "@/components/customPage";
	import myDatePicker from "@/components/myDatePicker";
	import paramDialog from "./child/paramDialog.vue"
	export default {
		components: {
			customPage,
			myDatePicker,
			paramDialog
		},
		data() {
			return {
				tableData: [],
				total: 0,
				searchForm: {
					orderNo: "",
					payTradeNo: "",
					payType: "",
					status: "",
					payTime: "",
					flowId: "",
				},
				dialogVisible: false,
				dialogType: 1,
				requestInfo: {},
				responseInfo: {},
			};
		},
		methods: {
			search() {
				const pickerVal = this.$refs.myDatePicker.getVal();
				if (pickerVal !== 'error') {
					this.searchForm.payTime = pickerVal;
					this.$refs.customPage.page = 1;
					this.getList();
				}
			},
			// 重置
			reset() {
				if (this.$refs.myDatePicker) {
					this.$refs.myDatePicker.reset();
				}
				this.searchForm = Object.assign({});
				this.getList();
			},
			checkContract(pactUrl) {
				if (!pactUrl) {
					this.$message.warning("暂无合同")
				} else {
					window.open(this.$globalObj.imgBaseUrl + pactUrl);
				}
			},
			getParams(row) {
				this.dialogType = 2;
				this.dialogVisible = true
				let info = JSON.parse(row)
				this.requestInfo = info.request ? JSON.parse(info.request.biz_content) : {}
				this.responseInfo = info.response ? info.response : {}
			},
			closeDialog() {
				this.dialogVisible = false;
			},
			// 获取列表
			getList() {
				const {
					page,
					pageSize
				} = this.$refs.customPage;
				getOrderList({
					page,
					pageSize,
					...this.searchForm
				}).then((res) => {
					this.tableData = res.data;
					this.total = res.total;
				});
			},
		},
		mounted() {
			this.getList();
		},
	};
</script>

<style lang="scss" scoped>
</style>
